<template>
  <div>
    <vxe-table border="none" show-overflow :row-config="{ keyField: 'id', useKey: true }" :data="tableData"
      :tree-config="{ transform: true, expandAll: true, showLine: true }" :column-config="{ resizable: true }"
      ref="tableRef" @resizable-change="resizableChange">
      <!-- <vxe-column type="seq" width="180" title="序号">
        <template #default="{ row }">
          <span>{{ computedIndex(row) }}</span>
        </template>
</vxe-column> -->
      <vxe-column field="name" title="Name" tree-node sortable :min-width="50" :width="50"></vxe-column>
      <vxe-column field="size" title="Size11"></vxe-column>
      <vxe-column field="type" title="Type22"></vxe-column>
      <vxe-column field="date" title="Date">
        <template #default="{ row }">
          <span>{{ computedDate(row.date) }}</span>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue'
import { useComputed } from './hooks/useComputed';

interface RowVO {
  id: number
  parentId: number | null
  name: string
  type: string
  size: number
  date: string
}

const tableData = ref<RowVO[]>([
  { id: 1, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
  { id: 24300, parentId: 1, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
  { id: 2, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
  { id: 23677, parentId: 2, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23678, parentId: 2, name: 'Test9', type: 'js', size: 1024, date: '2021-06-01' },
  { id: 23679, parentId: 23678, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
])

const tableRef = ref()

const getIndex = (row: any) => {
  const seq = tableRef.value.getRowSeq(row)
  console.log(row, '===');
  if (seq.includes('.')) {
    return seq.split('.')[1]
  } else {
    return ''
  }
}
const setDate = (date: string) => {
  return date
}
const computedIndex = useComputed(getIndex)
const computedDate = useComputed(setDate)

const resizableChange = ({ column }: any) => {
  if (column.field === 'name') {
    console.log(column);
    setColumn(column.resizeWidth)
  }
}

const setColumn = (width = 50) => {
  setTimeout(() => {
    nextTick(() => {
      let lines = document.getElementsByClassName('vxe-tree--line')
      console.log(Array.from(lines));
      Array.from(lines).forEach((item: any) => {
        console.log(+item.style.left.split('px')[0], '===');
        if (+item.style.left.split('px')[0] > width) {
          item.style.display = 'none'
        } else if(item.style.display === 'none') {
          item.style.display = 'block'
        }
      })
    })
  }, 300);
}

onMounted(() => {
  setColumn()
})

</script>
